<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购物车</title>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		/* 为 class="remove" 的标签添加click点击事件 */
		$(".remove").click(function(){
			var $tr = $(this).parent().parent();
			var title = $.trim($tr.find("td:first").text());
			var flag = confirm("确定要删除" + title + "的信息吗?");
			
			if(flag){
				return true;
			}
			return false;
		});
		
		/* ajax修改单个商品的数量 */
		//1.获取页面中所有的text, 并为其添加onchange响应函数, 弹出确认对话框,合法性校验,输入0为删除
		$(":text").change(function(){
			var quantityVal = $.trim(this.value);
			var quantity = -1;
			var flag = false;
			var reg = /^\d+$/g;
			if(reg.test(quantityVal)){
				quantity = parseInt(quantityVal);
				if(quantity >= 0){
					flag = true;
				}
			}
			
			if(!flag){
				alert("输入的数量不合法!");
				/* 给value 赋 class的值 */
				$(this).val($(this).attr("class"));
				return;
			}
			
			var $tr = $(this).parent().parent();
			var title = $.trim($tr.find("td:first").text());
			
			// 值为0时删除购物车中的该商品
			if (quantity == 0) {
				var flag2 = confirm("确定要删除"+ title +"吗？");
				if(flag2){
					/* var href = $tr.find("td:last").find("a").attr("href");
					var serializeVal = $(":hidden").serialize();
					href = href + "&" + serializeVal;
					window.location.href = href; */
					//得到a标签节点
					var $a = $tr.find("td:last").find("a");
					//执行a节点的onclick 响应函数
					$a[0].onclick();
					return;
				}
			}
			
			var flag3 = confirm("确定要修改"+ title +"的数量吗？");
			if(!flag3){
				$(this).val($(this).attr("class"));
				return;
			}
			//2.请求地址为: bookServlet
			var url = "bookServlet";
			//3.请求json参数为： method: updateItemQuantity, id:name属性值, quantity:val, time:new Date();
			var idVal = $.trim(this.name);
			var args = {"method":"updateItemQuantity", "id":idVal, "quantity":quantityVal, "time":new Date()};
			//4.在updateItemQuantity 方法中，获取 quantity, id, 再获取购物车对象, 调用service 的方法做修改
			//5.传回json数据: bookNumber totalMoney
			//6.更新当前页面的bookNumber和totalMoney
			$.post(url, args, function(data){
				var bookNumber = data.bookNumber;
				var totalMoney = data.totalMoney;
				var itemMoney = data.itemMoney;
				$("#totalMoney").text("总金额：￥" + totalMoney);
				$("#bookNumber").text("您的购物车中共有" + bookNumber + "本书");
				$("#"+idVal).text(itemMoney);
			},"JSON");
		});
	})
</script>
<%@ include file="/commons/queryCondition.jsp" %>
</head>
<body>
	<center>
		<br><br>
			<div id="bookNumber">您的购物车中共有 ${sessionScope.ShoppingCart.bookNumber } 本书</div> 
		<table cellpadding="10">
			<tr>
				<td>书名</td>
				<td>单价</td>
				<td>数量</td>
				<td>价格</td>
				<td>&nbsp;</td>
			</tr>
			<c:forEach items="${sessionScope.ShoppingCart.items }" var="item">
				<tr>
					<td>${item.book.title }</td>
					<td>${item.book.price }</td>
					<td>
						<input class="${item.quantity }" type="text" size="1" name="${item.book.id }" value="${item.quantity }"/>
					</td>
					<td id="${item.book.id }">${item.itemMoney }</td>
					<td><a href="bookServlet?method=remove&pageNo=${param.pageNo }&id=${item.book.id }" class="remove">删除</a></td>
				</tr>
			</c:forEach>
			<tr>
				<td colspan="5" id="totalMoney">总金额：￥${sessionScope.ShoppingCart.totalMoney } </td>
			</tr>
			<tr>
				<td colspan="5">
					<a href="bookServlet?method=getBooks&pageNo=${param.pageNo }">继续购物</a>
					&nbsp;&nbsp;

					<a href="bookServlet?method=clear&pageNo=${param.pageNo }">清空购物车</a>
					&nbsp;&nbsp;

					<a href="bookServlet?method=forwardPage&page=checkout">结账</a>
					&nbsp;&nbsp;
				</td>
			</tr>
		</table>
	</center>
</body>
</html>